import JSONEditorComponent from "@/components/JSONEditorComponent";
import { useEffect, useState } from "react";
import {
  JsonView,
  allExpanded,
  darkStyles,
  defaultStyles,
} from "react-json-view-lite";
import "react-json-view-lite/dist/index.css";
console.log(defaultStyles);

export default function Index() {
  const [showEditor, setShowEditor] = useState(true);
  const [readOnly, setReadOnly] = useState(false);
  const [content, setContent] = useState({
    json: {
      greeting: "你好",
      color: "#ff3e00",
      ok: true,
      values: [
        1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 1, 2, 3, 4, 5, 6, 7,
      ],
    },
    text: undefined,
  });
  const json = {
    a: 1,
    b: "String",
  };
  useEffect(() => {
    setTimeout(() => {
      const t = document.querySelector(".test");
      if (t) {
        t.innerHTML = "111";
      }
    }, 100);
  }, []);

  return (
    <div style={{ minHeight: 2000 }}>
      {/* <JSONEditorComponent
        content={content}
        readOnly={false}
        onChange={(_, previousContent: any) => {
          console.log(previousContent.json);
        }}
      />
      <div className="mt-1"></div>
      <JSONEditorComponent
        navigationBar={false}
        content={content}
        mainMenuBar={false}
        readOnly={true}
        onChange={(_, previousContent: any) => {
          console.log(previousContent.json);
        }}
      />
      <div
        onClick={() => {
          setTimeout(() => {
            const t = document.querySelector(".test");
            if (t) {
              t.innerHTML = "111";
            }
          });
        }}
      >
        <JsonView
          data={json}
          shouldExpandNode={allExpanded}
          style={{ ...defaultStyles, ...{ stringValue: "test" } }}
        />
      </div>

      <JsonView data={json} shouldExpandNode={allExpanded} style={darkStyles} /> */}
    </div>
  );
}
